*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: "微软雅黑","宋体",Arial,sans-serif;
}
a{
    text-decoration: none;
}
.nav{
    padding: 0 80px;
    display: flex;
    justify-content: space-between;
    background: #eee;
    ul{
        list-style: none;
        display: flex;
        li{
            a{
                display: inline-block;
                line-height: 80px;
                padding: 0 20px;
                color: black;
                font-size: 15px;
                &:hover{
                    background-color: #ddd;
                }
            }
        }
    }
    div{
        button{
            width: 50px;
            height: 50px;
            border-radius: 50%;
            color: black;
            font-size: 12px;
            border: none;
            cursor: pointer;
            margin-top: 15px;
            &:nth-child(2){
                color: white;
                background-color: black;
            }
        }
    }
}
@mixin theme($fontColor,$bgColor){
    .nav{
        background-color: $bgColor;
        ul{
            li{
                a{
                    color: $fontColor;
                    &:hover{
                        background-color: darken($bgColor,20)
                    }
                }
            }
        }
    }
    background-color: lighten($bgColor,20);
    color:$fontColor;
};

body{
    &[data-theme="light"]{
        @include theme(black,#eee)
    }
    &[data-theme="dark"]{
        @include theme(white, #666)
    }
}